<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>车辆黑名单列表</title>
    <link rel="stylesheet" href="${request.contextPath}/layuiadmin/layui/css/layui.css" media="all">
    <style>
        .layui-form-label{
            width: 140px;
        }
        #time{
            width:180px ;
        }

    </style>
</head>
<body style="background-color: #F2F2F2;" >
<div style="padding: 20px; ">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body">
<#--                    <form class="layui-form" action="" style="margin-top: 8px">-->
<#--                        <div class="layui-form-item">-->
<#--                            <div class="layui-inline">-->
<#--                                <label class="layui-form-label">标题</label>-->
<#--                                <div class="layui-input-inline" style="width: 150px;">-->
<#--                                    <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="" class="layui-input" value="${(customerQuery.customername)?if_exists}">-->
<#--                                </div>-->
<#--                                <label class="layui-form-label">公文种类</label>-->
<#--                                <div class="layui-input-inline" style="width: 150px;">-->
<#--                                    <input  type="text" name="document_type" lay-verify="title" autocomplete="off" placeholder="" class="layui-input" value="${(customerQuery.telephone)!}">-->
<#--                                </div>-->

<#--                                <div class="layui-input-inline">-->
<#--                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-->
<#--                                    <button type="button" class="layui-btn" id="search">查询</button>-->
<#--                                    <button type="button" class="layui-btn" id="reset">清空</button>-->
<#--                                </div>-->
<#--                            </div>-->


<#--                        </div>-->
<#--                    </form>-->
                    <#-- 数据表格-->
                    <table class="layui-hide" id="customer" lay-filter="customer"></table>

                    <script type="text/html" id="toolbar">
                        <div class="layui-btn-container">
                            <button class="layui-btn layui-btn-sm" lay-event="add">新增</button>
<#--                            <button class="layui-btn layui-btn-sm" lay-event="multiDelete">批量删除</button>-->
                        </div>
                    </script>

                    <script type="text/html" id="bar">
<#--                        <a class="layui-btn layui-btn layui-btn-xs" lay-event="clean">文件清退</a>-->
<#--                        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>-->
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                    </script>

                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="timeTpl">
    {{#  if(d.regdate !=null){ }}
    <div>{{layui.util.toDateString(d.regdate, 'yyyy-MM-dd HH:mm:ss')}}</div>
    {{#  } else { }}
    {{#  } }}

</script>
<script type="text/html" id="timeTpl2">
    {{#  if(d.registrationTime !=null){ }}
    <div>{{layui.util.toDateString(d.registrationTime, 'yyyy')}}</div>
    {{#  } else { }}
    {{#  } }}
</script>


<script src="${request.contextPath}/layuiadmin/layui/layui.js"></script>

<script>
    layui.use(['table','form','jquery','laydate'], function(){
        var table = layui.table;
        var form=layui.form;
        var $=layui.$;
        var layer=layui.layer;
        var laydate=layui.laydate;

        //日期选择
        laydate.render({
            elem: '#year'
            ,trigger: 'click'//呼出事件改成click
            ,type: 'year'
        });

        var addLayerIndex='';
        table.render({
            elem: '#customer'
            ,url:'${request.contextPath}/${page}/getPageList'
            ,method:'post'
            ,contentType: "application/json;charset=UTF-8"
            ,dataType: 'json'
            ,done:function (res,curr,count) {
                // console.log(res)
                // $("tr").css("height",60)
            }
            ,toolbar: '#toolbar' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: [
            //     'filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
            //     title: '提示'
            //     ,layEvent: 'LAYTABLE_TIPS'
            //     ,icon: 'layui-icon-tips'
            // }
            ]
            ,title: '${page}'
            ,cols: [[
                {field:'serial', title:'车牌号'}
                ,{field:'note',title:'备注信息'}
                ,{fixed: 'right', title:'操作', toolbar: '#bar',width:90}
            ]]
            ,page: true
            ,parseData: function(res){ //res 即为原始返回的数据
                console.log(res)
                return {
                    "code": res.data.code, //解析接口状态
                    "msg": res.data.msg, //解析提示文本
                    "count": res.data.count, //解析数据长度
                    "data": res.data.data //解析数据列表
                };
            }
        });



        //头工具栏事件
        table.on('toolbar(customer)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);


            switch(obj.event){
                case 'getCheckData':
                    var data = checkStatus.data;
                    console.log(data)
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：'+ data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选');
                    break;

                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
                //自定义头工具栏右侧图标 - 提示
                case 'add':
                    layer.open({
                        title:'新增',
                        type: 2,
                        area: ['500px', '350px'],
                        // area: '30%',
                        content: ['${request.contextPath}/to/${page}?type=layer'], //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                        btn: ['确认','取消'], //按钮
                        yes:function (index,layero) {
                            addLayerIndex=index;
                            // var son = window['layui-layer-iframe' + index];
                            // son.child(111);
                            //获取子窗口的函数
                            var formSubmit=layer.getChildFrame('form', index);
                            console.log(formSubmit)
                            var submited = formSubmit.find('button')[0];
                            submited.click()
                        }
                    });
                    break;
                    //批量删除
                    case 'multiDelete':

                        layer.confirm('确认删除选中的数据吗？', function(index){
                            var data = checkStatus.data;
                            var idAry=[];
                            if(data.length===0){
                                layer.msg("请至少选择一条数据！！");
                                return false;
                            }
                            for(var i=0;i<data.length;i++){
                                var row=data[i];
                                idAry.push(row.id);
                            }
                            var param={}
                            param.table='${page}';
                            param.ids=idAry;
                            $.ajax({
                                type:"post",
                                url: "${request.contextPath}/deleteItemsByIds",
                                //这里没有用json传值，所以contentType
                                contentType:'application/json; charset=UTF-8',
                                data : JSON.stringify(param),
                                success: function(res) {
                                    if(res.code===200){
                                        layer.msg(res.msg)
                                        layer.close(index);
                                        table.reload('customer')
                                    }
                                },
                                error: function(res) {
                                    layer.alert(res.msg,{icon:2})
                                }
                            })
                            layer.close(index);
                        });
            };
        });

        //监听行工具事件
        table.on('tool(customer)', function(obj){
            var data = obj.data;
            var idAry=[];
            idAry.push(data.id);
            var param={}
            param.ids=idAry;
            param.table='${page}'

            if(obj.event === 'del'){
                layer.confirm('确认删除吗？', function(index){
                    $.ajax({
                        type:"post",
                        url: "${request.contextPath}/deleteItemsByIds",
                        //这里没有用json传值，所以contentType
                        contentType:'application/json; charset=UTF-8',
                        data :JSON.stringify(param),
                        success: function(res) {
                            if(res.code===200){
                                layer.msg(res.msg)
                                layer.close(index);
                                table.reload('customer')
                            }
                        },
                        error: function(res) {
                            layer.alert(res.msg,{icon:2})
                        }
                    })
                    layer.close(index);
                });
            }
        });

        //查询按钮
        $("#search").click(function () {
            var title=$("input[name='title']").val();
            var document_type=$("input[name='document_type']").val();

            //列表的重载
            table.reload('customer', {
                page:{curr:1}
                ,where: {title: title,document_type:document_type}
                }
            );


        });

        //清空按钮
        $("#reset").click(function () {
           $("input").val("")
        });
        //关闭新增layer
        window.closeAddLayer=function () {
            layer.close(addLayerIndex)
        }
        //重载客户列表
        window.reloadCustomerList=function(){
            table.reload('customer')
        }
    });

</script>
<script type="text/html" id="imgtmp">
    <img src="{{d.headimgurl}}" style="height: 50px;width: 50px">
</script>
</body>
</html>